"use client";
import { memo } from "react";
import type { ReactNode, FC } from "react";
import styles from "./style.module.scss";
import { getImgOnSize } from "@/utils/format";
interface IProps {
  children?: ReactNode;
  item: any;
}

const AlbumItem: FC<IProps> = (props) => {
  const { item } = props;
  return (
    <div className={styles.albumsWrapper}>
      <div className={styles.image}>
        <img src={getImgOnSize(item.picUrl, 100)} />
        <a className={`sprite_cover ${styles.imgCv}`}></a>
        <a className={`sprite_icon ${styles.imgSd}`}> </a>
      </div>
      <a className={styles.aAlbum}>{item.name}</a>
      <a className={styles.aArtist}>{item.artist.name}</a>
    </div>
  );
};

export default memo(AlbumItem);
